<template>
    <div class="bi-pagination">
        <span class="total">{{ `共${pageData.total}条记录，当前显示${currentDisplay}条` }}</span>
        <el-pagination
            class="pagination-wrap"
            :total="pageData.total || 0"
            :page-size="pageData.pageSize"
            :page-sizes="pageSizes"
            :current-page="pageData.currentPage + 1"
            layout="prev, pager, next,sizes,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>
<script>

export default {
    name: 'BiPagination',
    data() {
        return {
            small: false,
            disabled: false,
            background: false
        };
    },
    props: {
        pageData: {
            type: Object,
            required: false,
            default: () => {
                return {
                    data: [],
                    first: true,
                    last: false,
                    lastPage: 0,
                    pageSize: 20,
                    total: 0,
                    totalPages: 0,
                    currentPage: 0
                };
            }
        },
        pageSizes: {
            type: Array,
            required: false,
            default: () => [20, 50, 100, 200]
        }
    },
    computed: {
        currentDisplay() {
            let startNum = 0;
            let endNum = 0;
            if (this.pageData.total != 0) {
                if (this.pageData.first === true && this.pageData.last === false) {
                    startNum = 1;
                    endNum = this.pageData.pageSize;
                } else if (this.pageData.last === true) {
                    startNum = this.pageData.pageSize * this.pageData.currentPage + 1;
                    endNum = this.pageData.total;
                } else {
                    startNum = this.pageData.pageSize * this.pageData.currentPage + 1;
                    endNum = this.pageData.pageSize * (this.pageData.currentPage + 1);
                }
            }
            return startNum + '-' + endNum;
        }
    },
    methods: {
        /**
         * 切换页码
         * @param { Number } pageIndex 页码
         */
        handleCurrentChange(pageIndex) {
            this.$emit('changePage', pageIndex - 1);
        },
        /**
         * 切换每页显示条目
         * @param { Number } val 显示条目
         */
        handleSizeChange(val) {
            this.$emit('sizeChange', val);
        }
    }
};
</script>
<style lang="scss" >
.bi-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .total {
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 0.14rem;
        line-height: 0.22rem;
    }
    .el-pager li.is-active {
        background: #e8f3ff;
        border-radius: 2px;
        color: #165dff;
    }
    .el-input__wrapper {
        box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
        background: #f2f3f5;
        border-radius: 2px;
    }
}
</style>